import './list.css'
import { useEffect, useRef } from "react";

function ListItem(props) {
    const listRef = useRef(null);
    useEffect(() => {
        listRef.current.classList.remove('animate__animated', `animate__${props.animateFlag}`)
        listRef.current.offsetWidth; // 触发重绘
        listRef.current.classList.add('animate__animated', `animate__${props.animateFlag}`)
    }, [props.animateFlag])

    return <div className="container" ref={listRef} >
        <img className="avatar" src={props.avatar} alt="" />
        <span className="author">{props.name}</span>
        <p className="desc">{props.desc}</p>
    </div>
}
export default ListItem;